<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav-header">
			<view class="search-bar">
				<uni-icons type="search" size="18" color="#666" />
				<text class="placeholder">请输入食材名称查阅食谱</text>
			</view>
			<scroll-view scroll-x class="category-nav">
				<text v-for="(item, index) in categories" :key="index"
					:class="['nav-item', activeCategory === index ? 'active' : '']" @tap="switchCategory(index)">
					{{ item }}
				</text>
			</scroll-view>
		</view>

		<!-- 可滚动商品列表 -->
		<scroll-view scroll-y class="goods-scroll" :scroll-top="scrollTop">
			<view class="goods-grid">
				<view v-for="(goods, index) in currentGoods" :key="index" class="goods-card"
					@tap="handleGoodsClick(goods)">
					<image :src="goods.image" class="goods-img" />
					<view :class="['tag', goods.tagType]">{{ goods.tag }}</view>
					<view class="goods-info">
						<text class="name">{{ goods.name }}</text>
						<view class="price-area">
							<text class="current-price">¥{{ goods.price }}</text>
							<text class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice }}</text>
						</view>
						<text class="spec">{{ goods.spec }}</text>
						<view class="cart-btn">
							<uni-icons type="plus" color="#fff" size="16" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeCategory: 0,
				scrollTop: 0,
				categories: ['推荐', '家常菜', '烘焙', '减脂餐', '汤羹粥类', '异国料理'],
				goodsData: {
					// 推荐商品
					0: [{
							image: '/static/fanqiechaojidan/1.jpg',
							name: '番茄炒蛋',
							price: 15,
							spec: '2人份',
							tag: '国民下饭菜',
							tagType: 'featured',
							routeName: 'fanqiechaodan' // 路由标识
						},
						{
							image: '/static/电饭煲焖鸡/1.jpg',
							name: '电饭煲焖鸡',
							price: 60,
							spec: '三黄鸡1只',
							tag: '懒人料理',
							tagType: 'quick',
							routeName: 'dianfanbaomenji' // 路由标识
						},
						{
							image: '/static/酸辣土豆丝/1.jpg',
							name: '酸辣土豆丝',
							price: 10,
							spec: '土豆2个',
							tag: '快手菜',
							tagType: 'quick',
							routeName: 'suanlatudousi' // 路由标识
						},
						{
							image: '/static/冬瓜排骨汤/1.jpg',
							name: '冬瓜排骨汤',
							price: 90,
							spec: '冬季暖身',
							tag: '时令推荐',
							tagType: 'seasonal',
							routeName: 'dongguapaigutang' // 路由标识
						},
						{
							image: '/static/宫保鸡丁/1.jpg',
							name: '宫保鸡丁',
							price: 25,
							spec: '鸡腿肉300g',
							tag: '川味经典',
							tagType: 'cuisine',
							routeName: 'gongbaojiding' // 路由标识
						}
					],

					// 家常菜
					1: [{
							image: '/static/鱼香肉丝/1.jpg',
							name: '鱼香肉丝',
							price: 20,
							spec: '猪里脊200g',
							tag: '下饭神器',
							tagType: 'featured',
							routeName: 'yuxiangrousi' // 路由标识
						},
						{
							image: '/static/红烧茄子/1.jpg',
							name: '红烧茄子',
							price: 15,
							spec: '紫皮茄子2根',
							tag: '素菜精选',
							tagType: 'vegetarian',
							routeName: 'hongshaoqiezi' // 路由标识
						},
						{
							image: '/static/糖醋排骨/1.jpg',
							name: '糖醋排骨',
							price: 45,
							spec: '肋排500g',
							tag: '宴客硬菜',
							tagType: 'cuisine',
							routeName: 'tangcupaigu' // 路由标识
						},
						{
							image: '/static/麻婆豆腐/1.jpg',
							name: '麻婆豆腐',
							price: 15,
							spec: '嫩豆腐1盒',
							tag: '麻辣鲜香',
							tagType: 'cuisine',
							routeName: 'mapodoufu' // 新增路由标识
						},
						{
							image: '/static/地三鲜/1.jpg',
							name: '地三鲜',
							price: 20,
							spec: '土豆+茄子+青椒',
							tag: '东北特色',
							tagType: 'regional',
							routeName: 'disanxian' // 新增路由标识
						}
					],

					// 烘焙
					2: [{
							image: '/static/戚风蛋糕/1.jpg',
							name: '戚风蛋糕',
							price: 90,
							spec: '6寸配方',
							tag: '新手必修',
							tagType: 'basic',
							routeName: 'qifengdangao' // 新增路由标识
						},
						{
							image: '/static/葡式蛋挞/1.jpg',
							name: '葡式蛋挞',
							price: 30,
							spec: '12个装',
							tag: '下午茶',
							tagType: 'snack',
							routeName: 'pushidata' // 新增路由标识
						},
						{
							image: '/static/手撕面包/1.jpg',
							name: '手撕面包',
							price: 180,
							spec: '高筋面粉500g',
							tag: '拉丝效果',
							tagType: 'technique',
							routeName: 'shousimianbao' // 新增路由标识
						},
						{
							image: '/static/玛格丽特饼干/1.jpg',
							name: '玛格丽特饼干',
							price: 45,
							spec: '无添加',
							tag: '入口即化',
							tagType: 'featured',
							routeName: 'magelitebinggan' // 新增路由标识
						},
						{
							image: '/static/月饼/1.jpg',
							name: '月饼制作',
							price: 120,
							spec: '50g/个',
							tag: '中秋特辑',
							tagType: 'featured',
							routeName: 'yuebing' // 新增路由标识
						}
					],

					// 减脂餐
					3: [{
							image: '/static/鸡胸沙拉/1.jpg',
							name: '鸡胸沙拉',
							price: 15,
							spec: '250大卡',
							tag: '高蛋白',
							tagType: 'protein',
							routeName: 'jixiongshala' // 新增路由标识
						},
						{
							image: '/static/藜麦饭团/1.jpg',
							name: '藜麦饭团',
							price: 20,
							spec: '低GI主食',
							tag: '饱腹感',
							tagType: 'fiber',
							routeName: 'limaifantuan' // 新增路由标识
						},
						{
							image: '/static/西兰花炒虾仁/1.jpg',
							name: '西兰花炒虾仁',
							price: 15,
							spec: '优质脂肪',
							tag: '健身餐',
							tagType: 'fitness',
							routeName: 'xilanhuachaoxiaren' // 新增路由标识
						},
						{
							image: '/static/魔芋丝凉拌/1.jpg',
							name: '魔芋丝凉拌',
							price: 10,
							spec: '接近零卡',
							tag: '代餐首选',
							tagType: 'lowCal',
							routeName: 'moyusiliangban' // 新增路由标识
						},
						{
							image: '/static/酸奶碗/1.jpg',
							name: '酸奶碗',
							price: 5,
							spec: '无糖配方',
							tag: '早餐优选',
							tagType: 'lowCal',
							routeName: 'suannaiwan' // 新增路由标识
						},
						{
							image: '/static/鸡蛋蔬菜卷/1.jpg',
							name: '鸡蛋蔬菜卷',
							price: 12,
							spec: '180大卡/份',
							tag: '便携轻食',
							tagType: 'lowCarb', // 新标签类型：低碳水
							routeName: 'jidanshucaijuan' // 新增路由标识
						},
						{
							image: '/static/香煎鸡胸配时蔬/1.jpg',
							name: '香煎鸡胸配时蔬',
							price: 18,
							spec: '30g蛋白质',
							tag: '增肌必备',
							tagType: 'protein',
							routeName: 'xiangjianjixiongpeishishu' // 新增路由标识
						},
						{
							image: '/static/韩式牛肉沙拉/1.jpg',
							name: '韩式牛肉沙拉',
							price: 22,
							spec: '韩式辣酱调味',
							tag: '低脂高蛋白',
							tagType: 'protein', // 融合菜系
							routeName: 'hanshiniuroushala' // 路由标识
						},
						{
							image: '/static/微波炉蒸鲑鱼/1.jpg',
							name: '微波炉蒸鲑鱼',
							price: 25,
							spec: '富含Omega-3',
							tag: '办公室料理',
							tagType: 'quick', // 快速烹饪
							routeName: 'weiboluzhengguiyu' // 路由标识
						}
					],
					// 汤羹粥类
					4: [{
							image: '/static/莲藕排骨汤/1.jpg',
							name: '莲藕排骨汤',
							price: 120,
							spec: '砂锅慢炖',
							tag: '冬季暖身',
							tagType: 'seasonal',
							routeName: 'lianoupaigutang' // 新增路由标识
						},
						{
							image: '/static/皮蛋瘦肉粥/1.jpg',
							name: '皮蛋瘦肉粥',
							price: 30,
							spec: '电饭煲版',
							tag: '早餐经典',
							tagType: 'featured',
							routeName: 'pidanshourouzhou' // 新增路由标识
						},
						{
							image: '/static/西湖牛肉羹/1.jpg',
							name: '西湖牛肉羹',
							price: 20,
							spec: '宴客汤品',
							tag: '滑嫩口感',
							tagType: 'technique',
							routeName: 'xihuniurougeng' // 新增路由标识
						},
						{
							image: '/static/银耳雪梨羹/1.jpg',
							name: '银耳雪梨羹',
							price: 180,
							spec: '养生甜品',
							tag: '润肺佳品',
							tagType: 'featured',
							routeName: 'yinerxueligeng' // 新增路由标识
						},
						{
							image: '/static/酸辣汤/1.jpg',
							name: '酸辣汤',
							price: 15,
							spec: '开胃首选',
							tag: '家常快手',
							tagType: 'quick',
							routeName: 'suanlatang' // 新增路由标识
						}
					],

					// 异国料理
					5: [{
							image: '/static/日式咖喱饭/1.jpg',
							name: '日式咖喱饭',
							price: 30,
							spec: '鸡腿肉版',
							tag: '家庭改良',
							tagType: 'fusion',
							routeName: 'rishigalifan' // 新增路由标识
						},
						{
							image: '/static/韩式部队锅/1.jpg',
							name: '韩式部队锅',
							price: 40,
							spec: '午餐肉+泡菜',
							tag: '冬日限定',
							tagType: 'seasonal',
							routeName: 'hanshibuduiguo' // 路由标识

						},
						{
							image: '/static/意式肉酱面/1.jpg',
							name: '意式肉酱面',
							price: 25,
							spec: '自制酱料',
							tag: '西餐基础',
							tagType: 'basic',
							routeName: 'yishiroujiangmian' // 路由标识
						},
						{
							image: '/static/泰式冬阴功/1.jpg',
							name: '泰式冬阴功',
							price: 35,
							spec: '香茅+椰浆',
							tag: '酸辣开胃',
							tagType: 'featured',
							routeName: 'taishidongyingong' // 路由标识
						},
						{
							image: '/static/墨西哥卷饼/1.jpg',
							name: '墨西哥卷饼',
							price: 20,
							spec: '牛油果酱',
							tag: '低卡选择',
							tagType: 'fusion',
							routeName: 'moxigejuanbing' // 路由标识
						}
					]
				}
			}
		},
		computed: {
			currentGoods() {
				return this.goodsData[this.activeCategory] || []
			}
		},
		methods: {
			switchCategory(index) {
				this.activeCategory = index
				this.scrollTop = Math.random()
			},
			handleGoodsClick(goods) {
				if (!goods.routeName) return

				uni.navigateTo({
					url: `/pages/recipe/recipe-details-${goods.routeName}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag.organic {
		// background: #81C784;
		background: #FFF8F0;
	}

	/* 修改激活态颜色保持原样 */
	.nav-item.active {
		// color: #07C160;
		color: orange;

		&::after {
			// background: #07C160;
			background: orange;
		}
	}

	.container {
		// background: #FFFFFF;
		background: #FFF8F0;
		min-height: 100vh;
	}

	/* 顶部导航 */
	.nav-header {
		background: #FFF8F0;
		padding: 16rpx 24rpx;
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		    margin-bottom: 20rpx;

		.search-bar {
			background: #F5F5F5;
			border-radius: 40rpx;
			padding: 20rpx 28rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			// 阴影;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);

			.placeholder {
				color: #999999;
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}

		.category-nav {
			white-space: nowrap;
			height: 80rpx;

			.nav-item {
				display: inline-block;
				padding: 0 32rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				position: relative;

				&.active {
					color: orange;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: 10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 48rpx;
						height: 4rpx;
						background: orange;
						border-radius: 2rpx;
					}
				}
			}
		}
	}

	/* 商品滚动区 */
	.goods-scroll {
		height: calc(100vh - 240rpx);
		/* padding: 24rpx; */
		width: 96%;
		margin: 0 auto;
	}

	.goods-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	/* 商品卡片 */
	.goods-card {
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

		.goods-img {
			width: 100%;
			height: 320rpx;
			background: #F5F5F5;
		}

		.tag {
			position: absolute;
			top: 16rpx;
			left: 16rpx;
			padding: 6rpx 16rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;

			/*东北特色 */
			&.regional {
				background: #ffff00;
			}

			/*时令推荐 */
			&.seasonal {
				background: #00aaff;
			}

			/*川味经典 */
			&.cuisine {
				background: #aa00ff;
			}

			/*素菜精选 */
			&.vegetarian {
				background: #55ff00;
			}

			/*国民下饭菜 */
			&.featured {
				background: #FF4444;
			}

			/*懒人料理 */
			&.quick {
				background: #FF9500;
			}

			/*拉丝效果 */
			&.technique {
				background: #aaff7f;
			}

			/*新手必修 */
			&.basic {
				background: #00aa00;
			}

			/*下午茶 */
			&.snack {
				background: #aa0000;
			}

			/*代餐首选 */
			&.lowCal {
				background: #00aa00;
			}

			/*高蛋白 */
			&.protein {
				background: #ffaa7f;
			}

			/*饱腹感 */
			&.fiber {
				background: #ffaaff;
			}

			/*健身餐 */
			&.fitness {
				background: #55aa00;
			}

			&.protein {
				background: #ffaa00;
			}

			&.lowCarb {
				background: #ff00ff;
			}
		}

		.goods-info {
			padding: 20rpx;

			.name {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.4;
				margin-bottom: 12rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.price-area {
				display: flex;
				align-items: baseline;
				margin-bottom: 8rpx;

				.current-price {
					color: #FF4444;
					font-size: 32rpx;
					font-weight: 600;
				}

				.original-price {
					color: #999999;
					font-size: 24rpx;
					text-decoration: line-through;
					margin-left: 12rpx;
				}
			}

			.spec {
				color: #999999;
				font-size: 24rpx;
				line-height: 1.4;
			}

			.cart-btn {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #07C160;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
			}
		}
	}
</style>
